<template>
  <el-dialog :visible="sendGoodsVisible" title="发货" width="40%" @close="closeDialog">
    <el-form v-loading="formLoading" ref="sendGoods" :rules="rule" :model="sendForm">
      <el-form-item :label-width="labeWidth" label="订单编号" >
        <el-input v-model="ditaillist.orderSn" class="input" disabled="disabled" />
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="商品名称">
        <el-input v-model="ditaillist.goodsName" class="input" disabled="disabled"/>
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="购买人">
        <el-input v-model="ditaillist.userName" class="input" disabled="disabled" />
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="购买人手机号">
        <el-input v-model="ditaillist.userPhone" class="input" disabled="disabled" />
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="收货地址">
        <el-input v-model="ditaillist.receiverDetailAddress" class="input" disabled="disabled" />
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="快递单号" prop="num">
        <el-col :span="24" >
          <el-checkbox v-model="isVerification" type="checkbox" @change="manually">手动填写</el-checkbox>
          <el-input :disabled="!isVerification" v-model="sendForm.num" class="input" />
        </el-col>
      </el-form-item>
      <el-form-item v-if="addressList.length>0" :label-width="labeWidth" label="寄件人" prop="sendManName">
        <el-select v-model="sendForm.sendManName" placeholder="请选择寄件人" style="width:50%" @change="changeAddr">
          <el-option
            v-for="(item) in addressList"
            :key="item.id"
            :label="item.name"
            :value="item"/>
        </el-select>
        <!-- <el-button
          v-if="sendForm.sendManPrintAddr"
          style="margin-left:10px"
          type="primary"
          size="mini"
          @click="checkExpress">运力查询</el-button> -->
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="寄件人详细地址">
        <el-input v-model="sendForm.sendManPrintAddr" class="input" disabled="disabled" />
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="寄件人手机号">
        <el-input v-model="sendForm.sendManMobile" class="input" disabled="disabled" />
      </el-form-item>
      <el-form-item :label-width="labeWidth" label="物流公司" prop="com">
        <el-select v-model="sendForm.com" placeholder="请选择物流公司">
          <el-option v-for="(item, index) in expressCompany" :key="index" :label="item.companyName" :value="item.companyCode"/>
        </el-select>
      </el-form-item>
      <div class="bottomBtn">
        <el-button type="primary" @click="sendExpress('sendGoods')">确定</el-button>
        <el-button type="info" @click="closeDialog">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { getGoodsAddress } from '@/api/storeOrder'
import { sendExpress, getExpressCompany, verificationAddress } from '@/api/express'
import { Message } from 'element-ui'
import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'
// <sendGoods :send-goods-visible.sync="sendGoods" :send-goods-index="sendGoodsIndex" :send-goods-id="sendGoodsId"/>
export default {
  props: {
    sendGoodsVisible: {
      type: Boolean,
      required: true
    },
    sendGoodsIndex: {
      type: Number,
      required: true
    },
    sendGoodsData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      labeWidth: '120px',
      ditaillist: {},
      addressList: [],
      formLoading: false,
      expressCompany: [
        // {
        //   label: '德邦快递',
        //   value: 'debangkuaidi'
        // },
        // {
        //   label: '京东物流',
        //   value: 'jd'
        // },
        // {
        //   label: '顺丰快递',
        //   value: 'shunfeng'
        // }
      ],
      sendForm: {
        goodsOrderId: '',
        sendManName: '',
        sendManMobile: '',
        sendManPrintAddr: '',
        remark: '',
        com: '',
        num: ''
      },
      isVerification: false, // 运力检查， 如果勾选， 那么物流公司全部显示
      rule: {
        com: [
          { required: true, message: '请选择物流公司', trigger: 'blur' }
        ],
        sendManPrintAddr: [
          { required: true, message: '请选择寄件人地址', trigger: 'blur' }
        ]
        // num: [
        //   { required: true, message: '请选填写快递单号', trigger: 'blur' }
        // ]
      }
    }
  },
  watch: {
    sendGoodsIndex(val) {
      console.log(this.sendGoodsData)
      this.ditaillist = this.sendGoodsData
      this.ditaillist.receiverDetailAddress = this.ditaillist.receiverProvince + this.ditaillist.receiverCity + this.ditaillist.receiverCounty + ' ' + this.ditaillist.receiverDetailAddress
      this.sendForm.goodsOrderId = this.sendGoodsData.id // 订单id
      // this.sendForm.sendManName = this.sendGoodsData.userName
      console.log(val)
    }
  },
  created() {

  },
  mounted() {
    this.getAddress()
    this.getExpressCom()
  },
  methods: {
    // 快递单号手动填写
    manually(val) {
      if (!val) {
        this.sendForm.num = ''
        if (this.sendForm.sendManPrintAddr !== '') {
          this.checkExpress() // 运力查询
        }
      } else {
        this.sendForm.com = ''
        this.getExpressCom() // 所有物流
      }
    },
    // 获取所有物流公司
    getExpressCom() {
      const data = { pageNum: 0, pageSize: 1000 }
      getExpressCompany(data).then(res => {
        console.log('物流公司列表：', res)
        if (res.code === '200') {
          this.expressCompany = res.data.list
          console.log(res)
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    changeAddr(data) {
      console.log(data)
      console.log(CodeToText[data.province])
      this.sendForm.sendManName = data.name
      this.sendForm.sendManMobile = data.phone
      let detailAddr = ''
      if (data.province === '110000' || data.province === '120000') { // 如果选择北京或者天津 不加直辖市
        detailAddr = CodeToText[data.province] + CodeToText[data.county]
      } else {
        detailAddr = CodeToText[data.province] + CodeToText[data.city] + CodeToText[data.county]
      }
      detailAddr += data.detailAddress
      this.sendForm.sendManPrintAddr = detailAddr
      if (!this.isVerification) {
        this.checkExpress()
      }
    },
    // 运力查询
    checkExpress() {
      const formData = new FormData()
      formData.append('address', this.sendForm.sendManPrintAddr)
      verificationAddress(formData).then(res => {
        console.log('运力查询:', this.sendForm.sendManPrintAddr, res)
        if (res.code === '200') {
          this.expressCompany = res.data.list
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },

    // 发货
    sendExpress(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.verificationAddress, this.sendForm.num)
          if (this.isVerification && this.sendForm.num === '') {
            Message.error('请填写快递单号')
            return
          }
          this.formLoading = true
          console.log(this.sendForm)
          const formData = new FormData();
          formData.append('goodsOrderId', this.sendForm.goodsOrderId)
          formData.append('sendManName', this.sendForm.sendManName)
          formData.append('sendManMobile', this.sendForm.sendManMobile)
          formData.append('sendManPrintAddr', this.sendForm.sendManPrintAddr)
          if (this.isVerification) {
            formData.append('num', this.sendForm.num)
          }
          // formData.append('recAddress', this.ditaillist.receiverDetailAddress)
          formData.append('com', this.sendForm.com)
          sendExpress(formData).then(res => {
            console.log(res)
            if (res.code === '200') {
              this.$emit('shipped', '订单发货提交已成功,等待快递公司响应,请及时手动刷新页面')
              this.closeDialog()
            } else {
              Message.error(res.message + '-' + res.data)
            }
            this.formLoading = false
          })
        }
      })
    },
    // 获取寄件人列表
    getAddress() {
      const obj = { usableStatus: 1 }
      getGoodsAddress(obj).then(res => {
        console.log('获取寄件人列表:', res)
        if (res.code === '200') {
          this.addressList = res.data.list
        } else {
          Message.error(res.message + res.data)
        }
      })
    },
    closeDialog() {
      this.$emit('update:sendGoodsVisible', false)
    }
  }
}
</script>
<style scoped>
.bottomBtn{
    padding-top: 20px;
    width:100%;
    text-align: center;
    border-top: 1px solid #ddd
}
.bottomBtn button{
    display: inline-block;
}
select{
    width:100%
}
.input{
    width:90%
}
</style>
